<template>
	<view>
		<view class="invite-tab">
			<scroll-view scroll-x="true" class="scroll tab-wrap">
			<view class="tab-itmes"	:class="[tab_index == key ? 'tab-itmes-active' : '']"
			v-for="(tab,key) in invite_tab" :index="key" @click="switchTab(key)">
				{{tab.title}}({{tab.value}})
			</view>
			</scroll-view>
		</view>
		<mescroll-uni class="list-wrap" @getData="getListData" top="110" refs="mescroll" :size="10">
			<block slot="list">
				<view class="invite-list" v-if="invite_list.length > 0">
					<view class="invite-items" v-for="(itmes,index) in invite_list" :index="index">
						<view class="invite-mobile">商家账号：{{itmes.username}}</view>
						<view class="invite-col-start">
							<view class="invite-left">认证类型：{{itmes.cert_type}}</view>
							<view class="invite-left">审核状态：{{itmes.state}}</view>
						</view>
						<view class="invite-col-start">
						<view class="invite-right">店铺名称：{{itmes.shop_name}}</view>
						</view>
						<view class="invite-col-start">
							<view class="invite-right">审核时间：{{itmes.date}}</view>
						</view>
						
						<view class="invite-col-between" v-if="itmes.site_id > 0">
							<view class="shop_profit" @click="$util.redirectTo('./shop_profit?subordinate_site_id='+itmes.site_id)">
								推荐佣金
							</view>
							<view class="order_profit" @click="$util.redirectTo('./order_profit?subordinate_site_id='+itmes.site_id)">
								订单佣金
							</view>
						</view>
					</view>
				</view>
				<ns-empty v-else text="暂无邀请记录"></ns-empty>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_index: 0,
				invite_tab: [
					{
						title: '全部',
						value: 0
					},{
						title: '审核中',
						value: 0
					},{
						title: '审核成功',
						value: 0
					},{
						title: '审核失败',
						value: 0
					}
				],
				invite_list: []
			}
		},
		methods: {
			switchTab(index) {
				this.tab_index = index;
				this.invite_list = [];
				this.mescroll.resetUpScroll();
			},
			getListData(mescroll) {
				let data = {
					page_size: mescroll.size,
					page: mescroll.num,
					apply_state: this.tab_index
				};
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/shopapi/inviteCode/getInvitationRecord',
					data: data,
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
							this.invite_tab[0]['value'] = res.data.verify+res.data.adopt+res.data.fail;
							this.invite_tab[1]['value'] = res.data.verify;
							this.invite_tab[2]['value'] = res.data.adopt;
							this.invite_tab[3]['value'] = res.data.fail;
						} else {
							this.$util.showToast({ title: msg });
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.invite_list = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							v.is_off = 0;
						});					
						
						this.invite_list = this.invite_list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.invite-tab {
	width: 750upx;
	height: 90upx;
	background: #FFFFFF;
	font-size: 28upx;
	
	.tab-wrap{
		width: 100%;
		padding: 0 30upx;
		position: relative;
		overflow-x: scroll;
		white-space: nowrap;
		overflow: hidden;
	}
	.tab-itmes {
		position: relative;
		display: inline-block;
		height: 90upx;
		line-height: 90upx;
		color: #303133;
		margin-right: 40upx;
	}
	.tab-itmes-active {
		color: #FF6A00;
		border-bottom:4upx solid #FF6A00;
	}
}
.invite-items {
	width: 630upx;
	// height: 204upx;
	background: #FFFFFF;
	border-radius: 2upx;
	padding: 30upx;
	margin: 0 30upx 20upx 30upx;
	
	.invite-mobile {
		font-weight: 600;
		height: 40upx;
		font-size: 28upx;
		color: #303133;
		line-height: 40upx;
		margin-bottom: 12upx;
	}
	
	.invite-col-start {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 12upx;
		height: 34upx;
		font-size: 24upx;
		line-height: 34upx;
		
		.invite-left {
			width: 258upx;
			color: #909399;
		}
		.invite-right {
			color: #909399;
		}
	}
	
	.invite-col-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 78upx 0;
		
		.shop_profit {
			width: 208upx;
			height: 52upx;
			line-height: 52upx;
			border-radius: 28upx;
			border: 1px solid #FF6A00;
			font-size: 24upx;
			color: #FF6A00;
			text-align: center;
		}
		.order_profit {
			width: 208upx;
			height: 56upx;
			line-height: 56upx;
			background: #FF6A00;
			border-radius: 28upx;
			font-size: 24upx;
			color: #FFFFFF;
			text-align: center;
		}
	}
}

</style>
